<template>
	<view class="content">
		<view class="header">
			<u-navbar 
			:border-bottom='false' 
			:is-back="false" 
			back-text="" 
			title="" 
			:background="{backgroundColor: '#181818'}">
				<view class="slot-wrap">
					<u-icon size="40" name="arrow-left" @click="back"></u-icon>
					<view class="title">转账</view>
					<view @click="ransferRecords">记录</view>
				</view>
			</u-navbar>
		</view>
		<view class="cont_item">
			<view class="item">
				<view class="title">选择币种</view>
				<view class="type">
					<text>{{type}}</text>
					<text @click="typeClick">选择币种</text>
				</view>
			</view>
			<view class="item">
				<view class="title">转账地址</view>
				<view class="type">
					<u-input 
					:custom-style='{color:"#ffffff"}' 
					height="30"
					placeholder-style="color:#5c67ff"
					v-model="address" 
					type="text" 
					placeholder="输入或黏贴地址"  />
				</view>
			</view>
			<view class="item">
				<view class="title">数量</view>
				<view class="number">
					<view class="top">
						<u-input
						:custom-style='{color:"#ffffff"}' 
						height="30"
						placeholder-style="color:#5c67ff"
						v-model="number" 
						type="number" 
						:placeholder="'最小转账数量'+zxtb"  />
						<view class="lr">
							<text :class="{active:num_active==1}" @click="numType(1)">{{active==1?'USDT':'BST'}}</text>
							<text :class="{active:num_active==2}" @click="numType(2)">全部</text>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="des">
					<text v-show="active==1">可用{{usdt}}USDT</text>
					<text v-show="active==2">可用{{bst}}BST</text>
				</view>
				<view class="title">手续费</view>
				<view class="type">
					<text>{{sxf}}</text>
					<text>{{active==1?'USDT':'BST'}}</text>
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="title">
				<text>到账数量</text>
				<text>{{(number-sxf>0?number-sxf:0).toFixed(4)}}{{active==1?'USDT':'BST'}}</text>
			</view>
			<u-button 
			:loading="loading" 
			:disabled='!sxf' 
			:hair-line="btnBorder" 
			class="submit" 
			@click="submit">转账</u-button>
		</view>
		<!--短信验证弹窗-->
		<view class="sms_code" :class="{active:code_show}" @click="code_show=false">
			<view class="code" @click.stop>
				<view class="title">短信验证</view>
				<view class="item_code">
					<view class="lable">
						请输入验证码
					</view>
					<u-input
					:custom-style='inputStyle' 
					height="80"
					placeholder-style="color:#5c67ff"
					v-model="code" 
					type="" 
					placeholder=""  />
					<u-button
					:loading='loading'
					:hair-line="btnBorder" 
					class="submit" @click="confirmcode">确定</u-button>
				</view>
			</view>
		</view>
		<!--币种弹窗-->
		<view :class="{active:show}" class="typeCont" @click.stop="close">
			<view class="type_cont"  @click.stop>
				<view class="cont">
					<view :class="{active:active==1}" @click="clickType(1)">
						<image src="../../static/icon/USDT.png" mode=""></image>
						<text>选择USDT币种</text>
					</view>
					<view :class="{active:active==2}" @click="clickType(2)">
						<image src="../../static/icon/USDT.png" mode=""></image>
						<text>选择BST币种</text>
					</view>
					<!-- <u-button 
					:hair-line="btnBorder" 
					class="submit" @click="typeSubmit">确定</u-button> -->
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data(){
			return{
				inputStyle:{
					color:"#ffffff",
					backgroundColor:"#4b4fcc",
					borderRadius:"10rpx",
					paddingLeft:"15rpx",
				},
				code:'',//验证码
				btnBorder:false,
				active:1,//币种分类
				num_active:1,//数量分类
				code_show:false,//验证码弹窗
				show:false,//是否显示币种弹窗
				type:'USDT-TRC20',//币种名称
				address:'',//转账地址
				number:null,//数量
				loading:false,
				phone:null,//手机号
				sxf:0,//手续费
				usdt:0,//USDT
				bst:0,//BST
				zxtb:0,//最小转账数量
			}
		},
		onReady() {
			
		},
		onLoad() {
			this.getData()
			this.getUserInfo()
		},
		methods: {
			//获取用户信息
			getUserInfo(){
				this.$http({
					url:this.$api.user_getinfo,
					method:'POST',
					success:res=>{
						//console.log('成功返回---------',res)
						this.phone = res.data.phone
						this.usdt = res.data.usdt
						this.bst = res.data.bst
					}
				})
			},
			//获取手续费
			getData(){
				this.$http({
					url:this.$api.transfer_fuzhu,
					method:'POST',
					data:{number:'',bid:this.active},
					complete:e=>{
						if(e.data){
							this.zxtb = e.data.zxtb
							this.sxf = e.data.sxf
						}else{
							this.sxf = false
						}
					}
				})
			},
			//点击转账
			submit(){
				if(Number(this.number)<Number(this.zxtb) || !this.number ){
					this.$refs.uToast.show({
						title: '转账数量不正确',
						type: 'error'
					})
					return
				}
				if(!this.address ){
					this.$refs.uToast.show({
						title: '转账地址不正确',
						type: 'error'
					})
					return
				}
				if(!(/^[T][0-9A-Za-z]{33,}$/).test(this.address)){
					this.$refs.uToast.show({
						title: '转账地址不正确',
						type: 'error'
					})
					return
				}
				if(!this.phone){
					this.getUserInfo()
					this.$refs.uToast.show({
						title: '请重新点击按钮进行转账',
						type: 'error'
					})
					return
				}
				this.loading = true
				this.$http({
					url:this.$api.SendSms,
					method:'POST',
					data:{phone:this.phone,type:'zhaohui'},
					success:res=>{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
						this.code_show = true
					},
					complete:res=>{
						this.code = ''
						this.loading = false
					}
				})
			},
			//验证通过后提交转账
			_submit(){
				this.loading = true
				this.$http({
					url:this.$api.transfer_create,
					method:'POST',
					data:{type:this.active,num:this.number,address:this.address,code:this.code},
					success:res=>{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
						this.code_show = false
					},
					complete:e=>{
						this.loading = false
					}
				})
			},
			//点击确定验证验证码
			confirmcode(){
				if(!this.code ){
					this.$refs.uToast.show({
						title: '验证码不正确',
						type: 'error'
					})
					return
				}
				this.loading = true
				this.$http({
					url:this.$api.confirmcode,
					method:'POST',
					hideLoading:false,
					data:{
						phone:this.phone,
						code:this.code
					},
					success:res=>{
						this._submit()
					},
					complete:e=>{
						this.loading = false
					}
				})
			},
			//数量分类
			numType(e){
				this.num_active = e
				this.number = 0
				if(e==2){
					if(this.active==1){
						this.number = this.usdt
					}
					if(this.active==2){
						this.number = this.bst
					}
				}
			},
			//确定
			typeSubmit(){
				this.type = this.active==1?'USDT-TRC20':'BST'
				this.show = false
				this.getData()
			},
			//选择币种
			clickType(e){
				this.num_active = 1
				this.number = ''
				this.active = e
				this.type = this.active==1?'USDT-TRC20':'BST'
				this.show = false
				this.getData()
			},
			//关闭
			close(){
				this.show = false
			},
			//点击记录
			ransferRecords(){
				//console.log('记录')
				uni.navigateTo({
				    url: '/pages/Recording/index'
				});
			},
			//返回
			back(){
				uni.navigateBack({
				    delta: 1
				});
			},
			//点击选择币种
			typeClick(){
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.slot-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			padding: 0 30rpx;
			color: #FFFFFF;
			.title{
				font-size: 18px;
			}
		}
		.cont_item{
			padding-top: 12rpx;
			.item{
				padding: 0rpx 30rpx;
				.title{
					padding-top: 30rpx;
					font-size: 18px;
					color: #FFFFFF;
				}
				.type{
					color: #FFFFFF;
					display: flex;
					justify-content: space-between;
					padding: 24rpx 0;
					text:last-child{
						color:#5e69ff;
					}
				}
				.number{
					.top{
						display: flex;
						justify-content: space-between;
						padding: 28rpx 0 15rpx 0;
						.lr{
							color:#5e69ff;
							text{
								padding:0 15rpx;
								display: inline-block;
							}
							text:nth-child(1){
								border-right: 1px solid #5e69ff;
							}
							.active{
								color: #FFFFFF;
							}
						}
					}
				}
				.des{
					font-size: 12px;
					color:#5e69ff;
					padding-top: 10rpx;
				}
				border-bottom: 1px solid $border-bottom-color;
			}
		}
		.btn{
			width: 90%;
			position: fixed;
			left: 5%;
			bottom: 200rpx;
			.title{
				color: #FFFFFF;
				display: flex;
				justify-content: space-between;
			}
			.submit{
				background-color: #5e69ff;
				color: #ffffff;
				margin-top: 20rpx;
				border-color: $border-bottom-color;
				font-size: 20px;
				font-weight: 600;
			}
		}
		.typeCont.active{
			bottom: 0;
		}
		.sms_code{
			width: 100%;
			height: 100vh;
			background-color: rgba(0,0,0,0.6);
			position: fixed;
			left: 0;
			bottom: -100vh;
			transition: 0.35s;
			z-index: 999;
			.code{
				background: transparent url(../../static/bzbg.png)left center no-repeat;
				background-size: 100% 100%;
				width: 95%;
				height: 390rpx;
				position: absolute;
				left: 2.5%;
				bottom: calc(50% - 190rpx);
				z-index: 2;
				padding: 40rpx 45rpx;
				box-sizing: border-box;
				.title{
					font-size: 18px;
					color: #FFFFFF;
					font-weight: 600;
					text-align: center;
				}
				.lable{
					color: #FFFFFF;
					padding: 15rpx 0;
				}
				.submit{
					background-color: $border-bottom-color;
					margin-top: 30rpx;
					color: #FFFFFF;
					font-weight: 600;
					border-color: $border-bottom-color;
				}
			}
		}
		.sms_code.active{
			bottom: 0;
		}
		.typeCont{
			width: 100%;
			height: 100vh;
			position: fixed;
			left: 0;
			bottom:-100vh;
			transition: 0.35s;
			z-index: 999;
			background-color: rgba(0,0,0,0.6);
		}
		.type_cont{
			background: transparent url(../../static/bzbg.png)left center no-repeat;
			background-size: 100% 100%;
			width: 95%;
			height: 390rpx;
			position: absolute;
			left: 2.5%;
			bottom: 30rpx;
			z-index: 2;
			.cont{
				padding: 70rpx 70rpx 0 70rpx;
				>view{
					display: flex;
					padding: 8rpx 0;
					padding-left: 155rpx;
					align-items: center;
					margin-bottom: 10rpx;
					color: #FFFFFF;
					font-size: 14px;
					image{
						width: 60rpx;
						height: 60rpx;
						margin-right: 18rpx;
					}
				}
				.active{
					background-color: #4b4fcc;
					border-radius: 10rpx;
				}
				.submit{
					background-color: $border-bottom-color;
					color: #FFFFFF;
					border: transparent;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
